{%  extends "base.html" %}
{% block content %}
<div class="row page" id="docs" style="display:block;">
        <div class="col-md-12" style="">
            <h3><i class="glyphicon glyphicon-leaf"></i> What is jsTree?</h3>
            {% include "base_index.html" %}

            <ul class="nav nav-tabs">
                <li ><a href="/" class="nava">Overview</a></li>
                <li><a href="/doc/config" class="nava">Configuration</a></li>
                <li><a href="/doc/htmls" class="nava">HTML data</a></li>
                <li class="active" id="selected_menu"><a href="/doc/json" class="nava">JSON data</a></li>
                <li><a href="/doc/events" class="nava">Events</a></li>
                <li><a href="/doc/interaction" class="nava">Interaction</a></li>
            </ul>
            <div class="tab-content">
                <div id="json" class="tab-content-item">

            <div class="row">
                <div class="col-md-12">
                    <h3><i class="glyphicon glyphicon-leaf"></i> Populating the tree using JSON</h3>
                </div>
            </div>
            <h4>The format</h4>
            <div class="row">
                <div class="col-md-6">
                    <p>jsTree needs a specific format to work with JSON. In the standard syntax no fields are required -
                        pass only what you need. Keep in mind you will be able to access any additional properties you
                        specify - jsTree won't touch them and you will be able to use them later on (using the <code>original</code>
                        property on each node).</p>
                    <p>To change the icon of the node use the <code>icon</code> property. Specifying a string containing
                        a <code>/</code> will display that image as the node icon. Using any other string will apply
                        that class to the <code>&lt;i&gt;</code> element that is used to represent the icon. You can use
                        boolean <code>false</code> to make jsTree render the node with no icon.</p>
                    <p>You can set the state on a node using the <code>state</code> property. Use any combination of the
                        following: <code>opened</code>, <code>selected</code>, <code>disabled</code>.</p>
                    <p>Both <code>li_attr</code> and <code>a_attr</code> are passed directly to jQuery's attr function.
                    </p>
                    <p>When using AJAX set <code>children</code> to boolean <code>true</code> and jsTree will render the
                        node as closed and make an additional request for that node when the user opens it.</p>
                    <p>Any nested children should either be objects following the same format, or plain strings (in
                        which case the string is used for the node's text and everything else is autogenerated).</p>
                </div>
                <div class="col-md-6">
						<pre><code><span
                                class="comment">// Expected format of the node (there are no required fields)</span>
{
  id          : "string" <span class="comment">// will be autogenerated if omitted</span>
  text        : "string" <span class="comment">// node text</span>
  icon        : "string" <span class="comment">// string for custom</span>
  state       : {
    opened    : boolean  <span class="comment">// is the node open</span>
    disabled  : boolean  <span class="comment">// is the node disabled</span>
    selected  : boolean  <span class="comment">// is the node selected</span>
  },
  children    : []  <span class="comment">// array of strings or objects</span>
  li_attr     : {}  <span class="comment">// attributes for the generated LI node</span>
  a_attr      : {}  <span class="comment">// attributes for the generated A node</span>
}</code></pre>
                </div>
            </div>
            <h4>Alternative JSON format</h4>
            <div class="row">
                <div class="col-md-6">
                    <p>If you do not want to use the nested <code>children</code> approach, you can use the alternative
                        syntax where each node object has two required fields: <code>id</code> &amp; <code>parent</code>
                        and no <code>children</code> property (everything else remains the same).</p>
                    <p>jsTree will automatically build the hierarchy. To indicate a node should be a root node set its
                        <code>parent</code> property to <code>"#"</code>.</p>
                    <p>This should be used mainly when you render the whole tree at once and is useful when data is
                        stored in a database using adjacency.</p>
                </div>
                <div class="col-md-6">
						<pre><code><span class="comment">// Alternative format of the node (id &amp; parent are required)</span>
{
  <strong>id          : "string"</strong> <span class="comment">// required</span>
  <strong>parent      : "string"</strong> <span class="comment">// required</span>
  text        : "string" <span class="comment">// node text</span>
  icon        : "string" <span class="comment">// string for custom</span>
  state       : {
    opened    : boolean  <span class="comment">// is the node open</span>
    disabled  : boolean  <span class="comment">// is the node disabled</span>
    selected  : boolean  <span class="comment">// is the node selected</span>
  },
  li_attr     : {}  <span class="comment">// attributes for the generated LI node</span>
  a_attr      : {}  <span class="comment">// attributes for the generated A node</span>
}</code></pre>
                </div>
            </div>
            <h4>Using JSON</h4>
            <div class="row">
                <div class="col-md-4">
                    <p>To populate the tree with a JSON object you need to use the <a
                            href="/api/#/?f=$.jstree.defaults.core.data"><code>$.jstree.defaults.core.data</code></a>
                        config option.</p>
                    <p>The expected format is an array of nodes, where each node should be an object as described above
                        or a simple string (in which case the string is used for the node's text property and everything
                        else is autogenerated). Any nested nodes are supplied in the same manner in the
                        <code>children</code> property of their parent.</p>
                </div>
                <div class="col-md-4">
						<pre><code>$('#using_json').jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="using_json" class="demo">
                    </div>
                    <script>
                        $(function () {
                            $('#using_json').jstree({
                                'core': {
                                    'data': [
                                        'Simple root node',
                                        {
                                            'text': 'Root node 2',
                                            'state': {
                                                'opened': true, 'selected': true
                                            },
                                            'children': [
                                                {'text': 'Child 1'},
                                                'Child 2'
                                            ]
                                        }
                                    ]
                                }
                            });
                        });</script>
                </div>
            </div>
            <h4>Using the alternative JSON format</h4>
            <div class="row">
                <div class="col-md-8">
						<pre><code>$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="using_json_2" class="demo">
                    </div>
                    <script>
                        $(function () {
                            $('#using_json_2').jstree({
                                'core': {
                                    'data': [
                                        {"id": "ajson1", "parent": "#", "text": "Simple root node"},
                                        {
                                            "id": "ajson2",
                                            "parent": "#",
                                            "text": "Root node 2",
                                            "state": {"opened": true}
                                        },
                                        {"id": "ajson3", "parent": "ajson2", "text": "Child 1"},
                                        {"id": "ajson4", "parent": "ajson2", "text": "Child 2"}
                                    ]
                                }
                            });
                        });</script>
                </div>
            </div>
            <h4>Using AJAX</h4>
            <div class="row">
                <div class="col-md-4">
                    <p>You can also use AJAX to populate the tree with JSON your server returns. The format remains the
                        same as the above, the only difference is that the JSON is not inside the config object, but
                        returned from the server.</p>
                    <p>To take advantage of this option you need to use the <a
                            href="/api/#/?f=$.jstree.defaults.core.data"><code>$.jstree.defaults.core.data</code></a>
                        config option.</p>
                    <p>Just use a standard jQuery-like AJAX config and jstree will automatically make an AJAX request
                        populate the tree with the response.</p>
                    <p>In addition to the standard jQuery ajax options here you can supply functions for
                        <code>data</code> and <code>url</code>, the functions will be run in the current instance's
                        scope and a param will be passed indicating which node is being loaded, the return value of
                        those functions will be used as URL and data respectively.</p>
                    <p>If you do not return correct json headers from the server, at least set the <code>dataType</code>
                        jQuery AJAX option to <code>"json"</code>.</p>
                </div>
                <div class="col-md-4">
						<pre><code>
$('#tree').jstree({
'core' : {
  'data' : {
    'url' : function (node) {
      return node.id === '#' ?
        'ajax_roots.json' :
        'ajax_children.json';
    },
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
});
						</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="using_json_3" class="demo"></div>
                    <script>
                        $(function () {
                            $('#using_json_3').jstree({
                                'core': {
                                    'data': {
                                        'url': function (node) {
                                            return node.id === '#' ? '/static/3.3.8/assets/ajax_roots.json' : '/static/3.3.8/assets/ajax_children.json';
                                        },
                                        'data': function (node) {
                                            return {'id': node.id};
                                        }
                                    }
                                }
                            });
                        });
                    </script>
                </div>
            </div>
            <h4>Using a function</h4>
            <div class="row">
                <div class="col-md-4">
                    <p>You can supply a function too. That function will receive two arguments - the node being loaded
                        and a callback function to call with the children for that node once you are ready.</p>
                </div>
                <div class="col-md-4">
						<pre><code>
$('#tree').jstree({
    'core' : {
        'data' : function (obj, cb) {
            cb.call(this,
              ['Root 1', 'Root 2']);
        }
    }});
						</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="using_json_4" class="demo"></div>
                    <script>
                        $(function () {
                            $('#using_json_4').jstree({
                                'core': {
                                    'data': function (obj, callback) {
                                        callback.call(this, ['Root 1', 'Root 2']);
                                    }
                                }
                            });
                        });
                    </script>
                </div>
            </div>

        </div>
            </div>


<p style="text-align:center; margin-top:2em;"><a href="//old.jstree.com" target="_blank">click here for the old site (v.1)</a>
</p>
</div>
</div>
{% endblock %}